<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>

<script type="text/babel">

class Weather extends React.Component {
  
  // 可以使用类内部变量，来代替构造函数赋值
  state = {isHot: false, wind:"威风"}
  // 自定义方法 
  changeWeath = () => {
    // 此处的this指向的是该类额实例对象
    this.setState({isHot:!this.state.isHot}) 
    console.log(this.state.isHot) 

  }

  render(){
    const {isHot} = this.state
    // 注意绑定事件的写法, 首先放大括号，其次方法名后不带（）
    return <h1 onClick={this.changeWeath}>今天天气很{isHot ? "炎热" : "凉爽"}</h1>
  }
}
// 2. 渲染到页面
ReactDOM.render(<Weather />, document.getElementById('root'))


class Car {
  constructor(name, price){
    this.name = name
    this.price = price
    // this.wheel = 4  
  }
  // 类中可以直接写赋值语句，如下代码的含义是： 给Car的实力对象添加一个属性a, 值为1
  a = 1
  wheel = 4
}

const c1 = new Car('奔驰 c63',  199)

console.log(c1)
</script>
</html>